<template>
  <div class="detailsForm">
    <el-dialog
      title="工单详情:"
      :visible="detailsVisible"
      width="40%"
      @close="detailsClose"
      @open="detailsOpen"
    >
      <el-form label-width="120px">
        <div
          v-if="
            item && item.taskStatusTypeEntity
              ? item.taskStatusTypeEntity.statusName === '取消'
              : true
          "
          class="detailsTtile"
        >
          <div>
            <div><img src="@/assets/Task/quxiao.png" alt=""></div>
            <div>取消</div>
          </div>
          <div>
            <img
              src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png"
              alt=""
            >
          </div>
        </div>
        <div
          v-if="
            item && item.taskStatusTypeEntity
              ? item.taskStatusTypeEntity.statusName === '待办'
              : true
          "
          class="detailsTtile"
        >
          <div>
            <div><img src="@/assets/Task/naozhong.png" alt=""></div>
            <div>待办</div>
          </div>
          <div>
            <img
              src="http://likede2-admin.itheima.net/img/pic_1.834b274c.png"
              alt=""
            >
          </div>
        </div>
        <div
          v-if="
            item && item.taskStatusTypeEntity
              ? item.taskStatusTypeEntity.statusName === '完成'
              : true
          "
          class="detailsTtile"
        >
          <div>
            <div><img src="@/assets/Task/finished.png" alt=""></div>
            <div>完成</div>
          </div>
          <div>
            <img
              src="http://likede2-admin.itheima.net/img/pic_4.3b5af41c.png"
              alt=""
            >
          </div>
        </div>
        <el-form label-width="100px" class="demo-ruleForm">
          <el-row style="padding-left: 30px; margin-top: 25px">
            <el-col
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="设备编号:">
                <span>{{ taskList.innerCode }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="创建日期:">
                <span>{{ createTime }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              v-if="
                item && item.taskStatusTypeEntity
                  ? item.taskStatusTypeEntity.statusName === '取消'
                  : true
              "
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="取消日期:">
                <span>{{ updateTime }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              v-if="
                item && item.taskStatusTypeEntity
                  ? item.taskStatusTypeEntity.statusName === '完成'
                  : true
              "
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="完成日期:">
                <span>{{ updateTime }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="运营人员:">
                <span>{{ taskList.userName }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="工单类型:">
                <span>{{ productTypeId }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              v-if="isShow"
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="补货数量:">
                <el-link :underline="false" @click="listFn">补货清单</el-link>
              </el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="工单方式:">
                <span>{{ taskList.createType === 0 ? "自动" : "手动" }}
                </span></el-form-item>
            </div>
            </el-col>
            <el-col
              v-if="
                item && item.taskStatusTypeEntity
                  ? item.taskStatusTypeEntity.statusName === '待办'
                  : true
              "
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="备注:">
                <span>{{ taskList.desc }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              v-if="
                item && item.taskStatusTypeEntity
                  ? item.taskStatusTypeEntity.statusName === '完成'
                  : true
              "
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="备注:">
                <span>{{ taskList.desc }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              v-if="!isFinally&&item&&item.taskStatusTypeEntity?item.taskStatusTypeEntity.statusName==='完成':''"
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="定位:">
                <span><i class="el-icon-location-outline" />{{ taskList.addr }} </span></el-form-item>
            </div>
            </el-col>
            <el-col
              v-if="
                item && item.taskStatusTypeEntity
                  ? item.taskStatusTypeEntity.statusName === '取消'
                  : true
              "
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="取消原因:">
                <span> {{ taskList.desc }}</span></el-form-item>
            </div>
            </el-col>
          </el-row>
          <el-form-item
            v-if="
              item && item.taskStatusTypeEntity
                ? item.taskStatusTypeEntity.statusName === '取消'
                : true
            "
          >
            <el-button
              class="cancel"
              @click="Recreate"
            >重新创建</el-button></el-form-item>
          <el-form-item
            v-if="
              item && item.taskStatusTypeEntity
                ? item.taskStatusTypeEntity.statusName === '待办'
                : true
            "
          >
            <el-button
              class="cancel"
              @click="cancelFn"
            >取消工单</el-button></el-form-item>
        </el-form>
      </el-form>
    </el-dialog>
    <!-- 补货清单list弹出层 -->
    <List
      :details-visible="listVisble"
      :task-id="taskId"
      @closeDialog="closeDialog"
    />
    <!-- 新增工单 -->
    <AddFrom
      :dialog-form-visible="dialogFormVisible"
      :task-id="taskId"
      :is-show="isShow"
      @closeFn="closeFn"
      @sureFn="sureFn"
    />
  </div>
</template>

<script>
import AddFrom from '@/views/Task/components/addForm.vue'
import List from '@/views/Task/components/list.vue'
import { taskInfo, postCancel } from '@/api/task'
export default {
  components: { List, AddFrom },
  props: {
    detailsVisible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    },
    isShow: {
      type: Boolean,
      default: true
    },
    isFinally: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      taskList: [],
      listVisble: false, // 控制补货清单的显示和隐藏
      dialogFormVisible: false, // 控制新增工单的显示和隐藏
      taskId: null // 补货详情需要用员工id才可以查询
    }
  },
  computed: {
    // 2.利用计算属性把对应接口数据的值转成文字
    // const time = new Date(callValue).toLocaleString()
    productTypeId() {
      let productTypeName = ''
      switch (this.taskList.productTypeId) {
        case 1:
          productTypeName = '投放工单'
          break
        case 2:
          productTypeName = '补货工单'
          break
        case 3:
          productTypeName = '维修工单'
          break
        case 4:
          productTypeName = '撤机工单'
      }
      return productTypeName
    },
    // 2.1.把对应的时间转换
    updateTime() {
      const str = new Date(this.taskList.updateTime).toLocaleString()
      const time = str.replace(/\//g, '.')
      return time
    },
    createTime() {
      const str = new Date(this.taskList.createTime).toLocaleString()
      const time = str.replace(/\//g, '.')
      return time
    }
  },
  methods: {
    detailsClose() {
      this.$emit('detailsClose')
    },
    // 1.弹出层打开的时候就马上调用接口数据
    async detailsOpen() {
      const { data } = await taskInfo(this.item.taskId)
      this.taskList = data
    },
    // 3.取消工单
    cancelFn() {
      this.$confirm('取消工单后,将不能恢复,是否确认取消？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: false
      })
        .then(async() => {
          const data = {}
          if (this.item !== null) {
            data.desc = this.item.desc
            data.taskId = this.item.taskId
          }
          await postCancel(data)
          this.$emit('cancelList')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 4.取消的补货清单点击的
    listFn() {
      console.log('取消清单')
      this.taskId = this.item.taskId
      this.listVisble = true
    },
    // 4.1关闭子组件弹出层
    closeDialog() {
      this.listVisble = false
    },
    // 5.查看详情取消--工单详情-重新创建
    // 点击打开新增工单同时需要把工单详情传给关闭了
    Recreate() {
      this.dialogFormVisible = true
      this.taskId = this.item.taskId
      this.detailsClose()
    },
    // 5.1关闭新增工单
    closeFn() {
      this.dialogFormVisible = false
    },
    sureFn() {
      this.dialogFormVisible = false
      this.$emit('detailsClose')
    }
  }
}
</script>
<style lang="scss">
.el-dialog {
  border-radius: 10px;
  .el-dialog__header .el-dialog__title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
  }
  .el-dialog__header {
    border-radius: 10px;
    background-color: #fff;
  }
  .el-icon-close:before {
    color: #909399;
  }
  .el-dialog__body {
    padding: 15px 20px;
  }
  .dialog-footer {
    padding: 0 20px 10px 20px;
  }
  .el-button {
    background-color: #fbf4f0 !important;
    border: unset;
    margin: 20px 0;
    margin-left: 120px;
    height: 36px;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .el-dialog .el-dialog__body {
    padding: unset;
  }
  .el-link.el-link--default {
    color: #5f84ff;
  }
}
.detailsTtile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  padding-left: 22px;
  :first-child {
    display: flex;
    align-items: center;
    :nth-child(2) {
      margin-left: 16px;
    }
  }
}
.el-message-box__wrapper {
  .el-message-box {
    width: 380px;
    padding: 0 1px 40px 17px;
    .el-message-box__status.el-icon-warning {
      color: #ff665f;
    }
    .el-message-box__btns {
      text-align: center;
      margin-top: 10px;
    }
    .el-message-box__message {
      font-size: 16px;
      color: #000;
      font-weight: 500;
    }
    .el-button--primary {
      background-color: #5f84ff;
      border: unset;
    }
  }
}
</style>
